<template>
  <div class="loginhome" style="overflow: auto">
    <!-- 头部 -->
    <div class="loginheader">
      <span
        class="el-icon-caret-left"
        @click="goback"
        style="cursor: pointer; font-size: 30px; margin-top: 5px"
      ></span>
      <el-input v-model="findSong" placeholder="你耳朵听什么" class="findSong">
        <template slot="append">
          <el-button type="primary">搜索</el-button>
        </template>
      </el-input>
    </div>
    <!-- tabs标签页 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="综合" name="first">
        <div>单曲</div>
        <ul v-infinite-scroll="load">
          <li v-for="(item, index) in searchinfo" :key="index">
            <!-- 歌名 -->
            <div class="namediv">
              <div class="singername">{{ item.name }}</div>
              <!-- 歌手名和专辑名 -->
              <div class="itemname">
                <span v-for="(itemname, index) in item.artists" :key="index">{{
                  itemname.name
                }}</span>
                -
                <span>{{ item.album.name }}</span>
              </div>
            </div>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="单曲" name="second">单曲</el-tab-pane>
      <el-tab-pane label="歌单" name="third">歌单</el-tab-pane>
      <el-tab-pane label="视频" name="fourth">视频</el-tab-pane>
      <el-tab-pane label="歌手" name="five">歌手</el-tab-pane>
      <el-tab-pane label="博客" name="six">博客</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      activeName: "first",
      searchinfo: [],
    };
  },
  created() {
    var findSong = this.$route.query.findSong;
    this.findSong = findSong;
    this.getSearchInfo();
  },
  methods: {
    load() {
      this.count += 2;
    },
    //   获取搜索歌曲信息
    getSearchInfo() {
      this.axios
        .get(`/search?keywords=${this.findSong}`)
        .then((res) => {
          console.log("=====");
          this.searchinfo = res.data.result.songs;
          console.log(this.searchinfo);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //   tab标签切换
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 返回上一页
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.findSong {
  width: 280px;
  margin-left: 20px;
}
.namediv {
  width: 340px;
  margin-left: 10px;
  margin-bottom: 10px;
  border-bottom: red solid 1px;
}
.singername {
  color: skyblue;
}
.itemname {
  font-size: 12px;
}
</style>